<script type="text/javascript" src="../../repo/files/%3Apublic%3Aplugin-samples%3Apentaho-cdf%3A30-documentation%3A30-component_reference%3Asamples.js"></script>
<div class="shadow">

  <div class="contents">

    <h2>TemplateComponent</h2>

    <h3>Description</h3>

    <p>
      This is a component that lets you define templates and render them using mustache or underscore, to easily display your data.<br>
      Like in the Table Component you can create and use addIns to further costumize and enhance the data you are displaying.
    </p>

    <h3>Options</h3>

    <dl class="documentation">
      <dt>name</dt>
      <dd>The name of the component</dd>

      <dt>type</dt>
      <dd><code>TemplateComponent</code></dd>

      <dt>parameter</dt>
      <dd>Parameter to Prompt</dd>

      <dt>listeners</dt>
      <dd><i>Array - </i> Parameters who this component will react to</dd>

      <dt>parameters</dt>
      <dd><i>Array of Arrays - </i> Parameters to pass to the template</dd>

      <dt>htmlObject</dt>
      <dd>Id of the component (usually a div or a span tag) to be replaced by the result</dd>

      <dt>refreshPeriod</dt>
      <dd>Time in seconds for this component to refresh. Default is 0 (disabled)</dd>

      <dt>executeAtStart</dt>
      <dd>True to execute the component at start, false otherwise</dd>

      <dt>preExecution</dt>
      <dd><i>Function - </i> Function to be called before the component is executed</dd>

      <dt>postExecution</dt>
      <dd><i>Function - </i> Function to be called after the component is executed</dd>

      <dt>chartDefinition</dt>
      <dd>MetaLayer object with the definition of the query (see MetaLayer options)</dd>

      <dt>tooltip</dt>
      <dd>Tooltip to be displayed when mouse hovers</dd>

      <dt>modelHandler</dt>
      <dd><i>Function - </i> Function to handle data for the model. Should return the model to be used on the template</dd>

      <dt>template</dt>
      <dd><i>Function - </i> Function that returns a template to be used</dd>

      <dt>templateType</dt>
      <dd>Template library to use on render (mustache or underscore)</dd>

      <dt>formatters</dt>
      <dd><i>Array of Arrays - </i> Used to format data. You must define an ID and a function that will return the formatted value</dd>

      <dt>events</dt>
      <dd><i>Array of Arrays - </i> Events to trigger for each event</dd>

      <dt>rootElement</dt>
      <dd>Set the id of the root element of the model to render</dd>

      <dt>extendableOptions</dt>
      <dd>An object with propertied to extend the functionality of the component</dd>
    </dl>

    <h3>MetaLayer options</h3>

    <dl class="documentation">
      <dt>queryType</dt>
      <dd>Type of query to read results from. Can be sql or mdx. Default: mdx</dd>

      <dt>jndi</dt>
      <dd>Connection to use for the query</dd>

      <dt>query</dt>
      <dd>sql or mdx Query to execute</dd>

      <dt>cube</dt>
      <dd>Cube name to use when queryType is mdx</dd>

      <dt>catalog</dt>
      <dd>Mondrian schema to use when queryType is mdx</dd>
    </dl>

    <h3>Sample</h3>

    <div id="example" class="flora">
      <ul>
        <li><a href="#sample"><span>Sample</span></a></li>
        <li><a href="#code"><span>Code</span></a></li>
      </ul>
      <div id="sample">
        <div id="sampleObject"></div>
        <br/>
      </div>

      <div id="code">
        <textarea cols="80" rows="40" id="samplecode">
require(['cdf/Dashboard.Blueprint', 'cdf/dashboard/Utils', 'cdf/components/TemplateComponent'],
  function(Dashboard, Utils, TemplateComponent) {

  var dashboard = new Dashboard();


  dashboard.addComponent(new TemplateComponent({
    name: "template_component",
    type: "TemplateComponent",
    chartDefinition: {dataAccessId: "template", path: "/public/plugin-samples/pentaho-cdf/legacy/actions/data-for-samples.cda"},
    htmlObject: "sampleObject",
    executeAtStart: true,

    parameters: [],
    modelHandler: "",
    template: function() {
      var template = ''+
        '<div class="templateWrapper clearfix">' +
        '   {{#items}} ' +
        '       <div class="templateRow">' +
        '           <div class="title"> {{0 | formatter : "reduceF"}} </div>' +
        '           <div class="desc"> {{0}} </div>' +
        '           <div class="value"> {{1 | formatter : "floatF"}} </div>' +
        '       </div>' +
        '   {{/items}} '+
        '</div>';
      return template;
    },
    templateType: "mustache",
    formatters: [
      ["floatF", function(value){
        return Utils.numberFormat(value, '0.0A');
      }],
      ["reduceF", function(value) {
        var arr = value.split(" ", 3);
        var result = "";
        for(var i = 0; i < arr.length; i++) {
          result += arr[i].charAt(0).toUpperCase();
        }
        return result;
      }]
    ],
    rootElement: "items",
    extendableOptions: ""
  }));

  dashboard.init();
});
        </textarea>
        <br/>
        <button id="tryMe">Try me</button>
      </div>
    </div>

  </div>
</div>